<template>
	<view style="overflow: auto">
		<uv-tabbar :value="name" @change="change" :safeAreaInsetBottom="false" :fixed="true" activeColor="#4564EB" inactiveColor="#0D0D0D">
		
			<uv-tabbar-item v-for="item,index in list" :key="index" :text="item.text" :name="item.text"  @click="handleClick(item)">
				<template v-slot:active-icon>
					<image class="icon" :src="item.selectedIconPath"></image>
				</template>
				<template v-slot:inactive-icon>
					<image class="icon" :src="item.iconPath"></image>
				</template>
			</uv-tabbar-item>  
		</uv-tabbar>
	</view>
</template>

<script> 
import store from '@/store';
	export default {
		name:"customTabbar",  
		props: {
			// value1: {
			// 	type: String, 
			// 	default: "数字看板"
			// }
		},
		computed: { 
			list() {
				return store.state.permission.tabbarList;
			},		
			name() {
				return store.state.common.currentTabbar;
			}
		},
		data() {
			return { 
				// list: [], 
				value: "数字看板"
			};
		},
		created() {
			uni.hideTabBar(); 
		},  
		mounted() {
			let _this = this;
			// _this.list = [];
			// _this.getList();
		},
		methods: {
			getList(){
				let _this = this;
				let tabbarList = uni.getStorageSync('tabbarList');
				tabbarList = tabbarList ? JSON.parse(tabbarList) : []; 
				if(tabbarList.length > 0){ 
					_this.list = tabbarList;  
				}
			},
			handleClick(item){  
				uni.switchTab({ url: item.pagePath }) 
			},
			change(name) {
				store.commit('changeCurrentTabbar', name);
			}
		},
	
	}
</script>

<style lang="scss">
.icon{
	width: 1.4rem;
	height: 1.4rem; 
}
.uv-tabbar{
	/deep/ .uv-tabbar__content {
		padding: 0.4rem 0;
	}
}
/deep/ .uv-tabbar-item__icon {
	width: auto !important;
}
</style>